<template>
  <div class="bigger-box">
    <div class="top">
      <top-bar></top-bar>
    </div>
    <div class="Mi-box-body">
      <!--      头部-->
      <top-header></top-header>
      <top-banner></top-banner>
      <!--      轮播图-->
      <carousel></carousel>
      <!--      服务区-->
      <services></services>
      <!--    商品区域-->
      <goods-one></goods-one>
      <goods-two></goods-two>
      <goods-three></goods-three>
      <goods-four></goods-four>
      <recommend></recommend>
      <hot-product></hot-product>
      <goods-content></goods-content>
      <!--      视屏区域-->
      <goods-video></goods-video>
      <!--      页脚-->
      <mi-footer></mi-footer>
    </div>
  </div>


</template>

<script>
import TopBar from "@/components/Mi/TopBar";
import TopHeader from "@/components/Mi/TopHeader";
import TopBanner from "@/components/Mi/TopBanner";
import Carousel from "@/components/Mi/Carousel";
import Services from "@/components/Mi/Services";
import GoodsOne from "@/components/Mi/GoodsOne";
import GoodsTwo from "@/components/Mi/GoodsTwo";
import GoodsThree from "@/components/Mi/GoodsThree";
import GoodsFour from "@/components/Mi/GoodsFour";
import Recommend from "@/components/Mi/Recommend";
import HotProduct from "@/components/Mi/HotProduct";
import GoodsContent from "@/components/Mi/GoodsContent";
import GoodsVideo from "@/components/Mi/GoodsVideo";
import MiFooter from "@/components/Mi/MiFooter";

export default {
  components: {
    TopBar,
    TopHeader,
    TopBanner,
    Carousel,
    Services,
    GoodsOne,
    GoodsTwo,
    GoodsThree,
    GoodsFour,
    Recommend,
    HotProduct,
    GoodsContent,
    GoodsVideo,
    MiFooter,
  },
  name: "Mi",
  data() {
    return {}
  },
  created() {
  
  },
  mounted() {
  
  },
  methods: {},
}
</script>

<style scoped lang="less">
.bigger-box {
  
  .Mi-box-body {
    padding: 0 107px;
    
  }
}

</style>
